import { useState, useEffect } from 'react';
import { Table, Button, Input, Space, Tag, Modal, Form, message, Select, Drawer, Tabs, Typography, Tooltip, Spin, Upload, Progress ,UploadProps} from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, PlayCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Movies as MovieType, MovieSeasons, MovieEpisodes } from '../types/movie';
import { getMovies, createMovie, updateMovie, deleteMovie, getSeasonsByMovieId, createSeason, updateSeason, deleteSeason, getEpisodesBySeasonId, createEpisode, updateEpisode, deleteEpisode, getMovieCmsById } from '../services/movieService';
import { uploadFile } from '../services/fileService';
const { Title } = Typography;

const Movies = () => {
  const [movies, setMovies] = useState<MovieType[]>([]);
  const [searchText, setSearchText] = useState('');
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [editingMovie, setEditingMovie] = useState<MovieType | null>(null);
  // 季和集管理状态
  const [seasonDrawerVisible, setSeasonDrawerVisible] = useState(false);
  const [episodeDrawerVisible, setEpisodeDrawerVisible] = useState(false);
  const [currentMovie, setCurrentMovie] = useState<MovieType | null>(null);
  const [seasons, setSeasons] = useState<MovieSeasons[]>([]);
  const [episodes, setEpisodes] = useState<MovieEpisodes[]>([]);
  const [editingSeason, setEditingSeason] = useState<MovieSeasons | null>(null);
  const [editingEpisode, setEditingEpisode] = useState<MovieEpisodes | null>(null);
  const [seasonForm] = Form.useForm();
  const [episodeForm] = Form.useForm();
  // 视频上传相关状态
  const [uploadProgress, setUploadProgress] = useState<number>(0);
  const [uploading, setUploading] = useState<boolean>(false);
  const [currentTabKey, setCurrentTabKey] = useState('all');
  const [loading, setLoading] = useState<boolean>(false);

  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(5);
  const [totalMovies, setTotalMovies] = useState<number>(0);

  //cms详情弹窗状态
  const [isCmsDetailVisible, setIsCmsDetailVisible] = useState(false);
  const [cmsDetailData, setCmsDetailData] = useState<any>(null);

  // 获取今天日期的格式化字符串
  const getTodayDate = () => {
    const today = new Date();
    return `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
  };

  const filteredMovies = currentTabKey === 'all' ?
    movies :
    movies.filter(movie => String(movie.type) === currentTabKey);

  useEffect(() => {
    fetchMovies(currentPage, pageSize);
  }, [currentPage, pageSize]);

  const handleTabChange = (key: string) => {
    setCurrentTabKey(key);
  };
  // 处理搜索
  const handleSearch = () => {
    setCurrentPage(1);
    fetchMovies(1, pageSize, 0, searchText);
  };
  const fetchMovies = async (page: number = 1, size: number = 5, type?: number, name?: string) => {
    setLoading(true);
    try {
      const data = await getMovies(size, page, type, name);
      setMovies(data.records);
      setTotalMovies(data.total);
    } catch (error) {
      message.error('获取影视数据失败');
      console.error('Error fetching movies:', error);
    } finally {
      setLoading(false);
    }
  };

  // 查询CMS详情
  const handleGetCmsDetail = async (sourceMovieId: string) => {
    setLoading(true);
    try {
      const data = await getMovieCmsById(sourceMovieId);
      setCmsDetailData(data);
      setIsCmsDetailVisible(true);
    } catch (error) {
      message.error('获取CMS数据失败');
      console.error('Failed to fetch CMS data:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleAddOrEdit = async () => {
    if (!form.validateFields()) return;
    setLoading(true);
    try {
      const formValues = form.getFieldsValue();
      const movieData = {
        ...formValues,
        releaseDate: new Date(formValues.releaseDate),
        type: formValues.type || 'movie',
      };
      let addAndUpdate = editingMovie ? true : false;
      if (!formValues.id) {
        addAndUpdate = false;
      }
      if (addAndUpdate) {
        let res = await updateMovie(movieData);
        if (res) {
          message.success('影视更新成功');
        } else {
          message.error('影视更新失败');
          return;
        }
      } else {
        let res = await createMovie(movieData);
        if (res) {
          message.success('影视添加成功');
        } else {
          message.error('影视添加失败');
          return;
        }
      }

      setIsModalVisible(false);
      form.resetFields();
      fetchMovies();
    } catch (error) {
      message.error(editingMovie ? '影视更新失败' : '影视添加失败');
      console.error('Error saving movie:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id: string) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这条影视记录吗？此操作不可撤销。',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        try {
          await deleteMovie(id);
          message.success('影视删除成功');
          fetchMovies();
        } catch (error) {
          message.error('影视删除失败');
          console.error('Error deleting movie:', error);
        }
      },
    });
  };

  const handleManageSeasons = async (movie: MovieType) => {
    setCurrentMovie(movie);
    setSeasonDrawerVisible(true);
    setLoading(true);
    try {
      const seasons = await getSeasonsByMovieId(String(movie.id));
      setSeasons(seasons);
    } catch (error) {
      message.error('获取季数据失败');
      console.error('Error fetching seasons:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleAddSeason = () => {
    setEditingSeason(null);
    seasonForm.resetFields();
    seasonForm.setFieldsValue({ movieId: currentMovie?.id });
  };

  const handleEditSeason = (season: MovieSeasons) => {
    setEditingSeason(season);
    seasonForm.setFieldsValue({
      ...season,
      releaseDate: season.releaseDate
    });
  };

  const handleSaveSeason = async () => {
    setLoading(true);
    try {
      const values = await seasonForm.validateFields();
      if (editingSeason) {
        // 更新季
        await updateSeason({
          ...editingSeason,
          ...values,
          releaseDate: new Date(values.releaseDate)
        });
        message.success('季信息更新成功');
      } else {
        // 添加季
        const newSeason: MovieSeasons = {
          ...values,
          movieId: currentMovie!.id,
          releaseDate: new Date(values.releaseDate)
        };
        await createSeason(newSeason);
        message.success('季添加成功');
      }
      // 重新获取季列表
      const data = await getSeasonsByMovieId(String(currentMovie!.id));
      setSeasons(data);
      seasonForm.resetFields();
      setEditingSeason(null);
    } catch (info) {
      if ((info as { errorFields?: any }).errorFields) {
        console.error('Validate Failed:', info);
      } else {
        message.error('操作失败，请重试');
        console.error('Error:', info);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleDeleteSeason = async (id: string) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个季吗？此操作不可撤销，相关的集也将被删除。',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        setLoading(true);
        try {
          await deleteSeason(String(id));
          // 重新获取季列表
          const data = await getSeasonsByMovieId(String(currentMovie!.id));
          setSeasons(data);
          setEpisodes([]); // 清空相关集
          message.success('季删除成功');
        } catch (error) {
          message.error('删除失败，请重试');
          console.error('Error deleting season:', error);
        } finally {
          setLoading(false);
        }
      },
    });
  };

  // 集管理相关方法
  const handleManageEpisodes = async (season: MovieSeasons) => {
    setLoading(true);
    try {
      setEditingSeason(season);
      const data = await getEpisodesBySeasonId(String(season.id));
      setEpisodes(data);
      setEpisodeDrawerVisible(true);
    } catch (error) {
      message.error('获取集数据失败');
      console.error('Error fetching episodes:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleAddEpisode = () => {
    setEditingEpisode(null);
    episodeForm.resetFields();
    episodeForm.setFieldsValue({ seasonId: editingSeason?.id });
  };

  const handleEdit = (record: MovieType) => {
    setEditingMovie(record);
    form.setFieldsValue({
      ...record,
      releaseDate: record.releaseDate
    });
    setIsModalVisible(true);
  };

  const handleEditEpisode = (episode: MovieEpisodes) => {
    setEditingEpisode(episode);
    episodeForm.setFieldsValue({
      ...episode,
      releaseDate: episode.releaseDate
    });
  };

  // 处理视频文件上传
  const customRequest: UploadProps['customRequest'] =  async({ file, onSuccess, onError, onProgress }) => {
    setUploading(true);
    setUploadProgress(0);
    
    try {
      // 使用fileService上传文件
      const result = await uploadFile(file as File);
      
      // 上传成功后，将文件路径设置到表单中
      if (result.filePath) {
        episodeForm.setFieldsValue({
          playUrl: result.filePath
        });
        message.success('视频上传成功');
        if (onSuccess) {
          onSuccess(result, file);
        }
      }
    } catch (error) {
      console.error('视频上传失败:', error);
      message.error('视频上传失败，请重试');
      if (onError) {
        onError(error as Error, file);
      }
    } finally {
      setUploading(false);
      setUploadProgress(0);
    }
  };

  const handleSaveEpisode = async () => {
    setLoading(true);
    try {
      const values = await episodeForm.validateFields();
      if (editingEpisode) {
        // 更新集
        await updateEpisode({
          ...editingEpisode,
          ...values,
          releaseDate: values.releaseDate ? new Date(values.releaseDate) : undefined
        });
        message.success('集信息更新成功');
      } else {
        // 添加集
        const newEpisode: MovieEpisodes = {
          ...values,
          seasonId: editingSeason!.id,
          releaseDate: values.releaseDate ? new Date(values.releaseDate) : undefined
        };
        await createEpisode(newEpisode);
        message.success('集添加成功');
      }
      // 重新获取集列表
      const data = await getEpisodesBySeasonId(String(editingSeason!.id));
      setEpisodes(data);
      episodeForm.resetFields();
      setEditingEpisode(null);
    } catch (info) {
      if ((info as { errorFields?: any }).errorFields) {
        console.error('Validate Failed:', info);
      } else {
        message.error('操作失败，请重试');
        console.error('Error:', info);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleDeleteEpisode = async (id: string) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个集吗？此操作不可撤销。',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        setLoading(true);
        try {
          await deleteEpisode(id);
          setEpisodes(episodes.filter(episode => String(episode.id) !== id));
          message.success('集删除成功');
        } catch (error) {
          message.error('删除失败，请重试');
          console.error('Error deleting episode:', error);
        } finally {
          setLoading(false);
        }
      },
    });
  };

  // 表格列定义
  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id', width: 50 },
    { title: '电影名称', dataIndex: 'title', key: 'title' },
    { title: '导演', dataIndex: 'director', key: 'director' },
    {
      title: '来源', dataIndex: 'source', key: 'source', render: (source: string) => {
        switch (source) {
          case '1': return '个人';
          case '2': return 'CMS采集网站';
          default: return '未知';
        }
      }
    },
    { title: '源电影ID', dataIndex: 'sourceMovieId', key: 'sourceMovieId' },
    {
      title: '上映日期',
      dataIndex: 'releaseDate',
      key: 'releaseDate',
      render: (date: Date) => date instanceof Date ? date.toLocaleDateString() : date
    },
    { title: '类型', dataIndex: 'genre', key: 'genre', render: (genre: string) => <Tag color="blue">{genre}</Tag> },
    {
      title: '简介', width: 100, dataIndex: 'description', key: 'description',
      ellipsis: {
        showTitle: false,
      },
      render: (description: string) => (
        <Tooltip placement="topLeft" title={description}>
          {description}
        </Tooltip>
      ),
    },
    {
      title: '媒体类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: number) => {
        switch (type) {
          case 1:
            return <Tag color="green">电影</Tag>
          case 2:
            return <Tag color="purple">电视剧</Tag>
          case 3:
            return <Tag color="blue">综艺</Tag>
          case 4:
            return <Tag color="orange">动漫</Tag>
          default:
            return <Tag color="gray">未知</Tag>
        }
      },
    },
    { title: '国家', dataIndex: 'country', key: 'country' },
    { title: '评分', dataIndex: 'rating', key: 'rating' },
    {
      title: '海报',
      dataIndex: 'posterUrl',
      key: 'posterUrl',
      render: (url: string) => <img src={url} alt="海报" style={{ width: 35, height: 52, objectFit: 'cover' }} />
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: MovieType) => (
        <Space size="middle">
          <Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
          <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(String(record.id))}>删除</Button>
          <Button type="text" icon={<PlayCircleOutlined />} onClick={() => handleManageSeasons(record)}>管理季</Button>
          {record.source === '2' && (
            <Button type="text" icon={<SearchOutlined />} onClick={() => handleGetCmsDetail(String(record.sourceMovieId))}>查询CMS</Button>
          )}
        </Space>
      ),
    },
  ];

  // 季表格列定义
  const seasonColumns = [
    { title: '季编号', dataIndex: 'seasonNumber', key: 'seasonNumber', width: 80 },
    { title: '标题', dataIndex: 'title', key: 'title' },
    {
      title: '发布日期',
      dataIndex: 'releaseDate',
      key: 'releaseDate',
      render: (date: Date) => date instanceof Date ? date.toLocaleDateString() : date,
      width: 120
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: MovieSeasons) => (
        <Space size="middle">
          <Button type="text" icon={<EditOutlined />} onClick={() => handleEditSeason(record)}>编辑</Button>
          <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDeleteSeason(String(record.id))}>删除</Button>
          <Button type="text" icon={<PlayCircleOutlined />} onClick={() => handleManageEpisodes(record)}>管理集</Button>
        </Space>
      ),
    },
  ];

  // 集表格列定义
  const episodeColumns = [
    { title: '集编号', dataIndex: 'episodeNumber', key: 'episodeNumber', width: 80 },
    { title: '标题', dataIndex: 'title', key: 'title' },
    {
      title: '发布日期',
      dataIndex: 'releaseDate',
      key: 'releaseDate',
      render: (date: Date) => date instanceof Date ? date.toLocaleDateString() : date,
      width: 120
    },
    { title: '时长(分钟)', dataIndex: 'runtime', key: 'runtime', width: 100 },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: MovieEpisodes) => (
        <Space size="middle">
          <Button type="text" icon={<EditOutlined />} onClick={() => handleEditEpisode(record)}>编辑</Button>
          <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDeleteEpisode(String(record.id))}>删除</Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="movies-page">
      <Title level={2}>影视资源管理</Title>
      <Tabs activeKey={currentTabKey} onChange={handleTabChange} style={{ marginBottom: 16 }}>
        <Tabs.TabPane tab="全部" key="all" />
        <Tabs.TabPane tab="电影" key="1" />
        <Tabs.TabPane tab="电视剧" key="2" />
        <Tabs.TabPane tab="综艺" key="3" />
        <Tabs.TabPane tab="动漫" key="4" />
      </Tabs>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
        <Space>
          <Input
            placeholder="搜索电影名称或导演"
            value={searchText}
            onChange={e => setSearchText(e.target.value)}
            style={{ width: 300 }}
          />
          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>搜索</Button>
        </Space>
        <Button type="primary" icon={<PlusOutlined />} onClick={() => { setIsModalVisible(true); setEditingMovie(null) }}>添加影视</Button>
      </div>

      <Spin spinning={loading} tip="加载中...">
        <Table
          columns={columns}
          dataSource={filteredMovies}
          rowKey="id"
          pagination={{
            current: currentPage,
            pageSize: pageSize,
            total: totalMovies,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条记录`,
            onChange: (page, pageSize) => {
              setCurrentPage(page);
              setPageSize(pageSize);
              fetchMovies(page, pageSize);
            },
            onShowSizeChange: (current, size) => {
              setPageSize(size);
              setCurrentPage(1);
              fetchMovies(1, size);
            }
          }}
          scroll={{ x: 1500 }} // 同时设置水平和垂直滚动
          style={{ tableLayout: 'fixed' }}
        />
      </Spin>

      {/* 电影添加/编辑模态框 */}
      <Modal
        title={editingMovie ? "编辑影视" : "添加影视"}
        visible={isModalVisible}
        onOk={handleAddOrEdit}
        onCancel={() => {
          setIsModalVisible(false);
          form.resetFields();
          setEditingMovie(null);
        }}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="id" hidden>
            <Input type="hidden" />
          </Form.Item>
          <Form.Item name="title" label="电影名称" rules={[{ required: true, message: '请输入电影名称' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="director" label="导演" rules={[{ required: true, message: '请输入导演' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="releaseDate" label="上映日期" rules={[{ required: true, message: '请选择上映日期' }]} initialValue={getTodayDate()}>
            <Input type="date" />
          </Form.Item>
          <Form.Item name="genre" label="类型" rules={[{ required: true, message: '请输入类型' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="type" label="媒体类型" rules={[{ required: true, message: '请选择媒体类型' }]}>
            <Select placeholder="请选择媒体类型">
              <Select.Option value={1}>电影</Select.Option>
              <Select.Option value={2}>电视剧</Select.Option>
              <Select.Option value={3}>综艺</Select.Option>
              <Select.Option value={4}>动漫</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="country" label="国家" rules={[{ required: true, message: '请输入国家' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="rating" label="评分" rules={[{ required: true, message: '请输入评分' }]}>
            <Input type="number" step="0.1" />
          </Form.Item>
          <Form.Item name="posterUrl" label="海报URL" rules={[{ required: true, message: '请输入海报URL' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="source" label="来源">
            <Select placeholder="请选择来源">
              <Select.Option value={'1'}>个人</Select.Option>
              <Select.Option value={'2'}>CMS采集网站</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="sourceMovieId" label="源电影ID">
            <Input placeholder="请输入源电影ID" />
          </Form.Item>
          <Form.Item name="description" label="简介">
            <Input.TextArea rows={4} placeholder="请输入影视简介" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 季管理抽屉 */}
      <Drawer
        title={`${currentMovie?.title} - 季管理`}
        width="100%"
        onClose={() => setSeasonDrawerVisible(false)}
        open={seasonDrawerVisible}
      >
        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
          <h3>季列表</h3>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAddSeason}>添加季</Button>
        </div>
        <Table
          columns={seasonColumns}
          dataSource={seasons}
          rowKey="id"
          pagination={{ pageSize: 5 }}
        />

        {/* 季添加/编辑表单 */}
        <div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid #e8e8e8' }}>
          <h4>{editingSeason ? '编辑季' : '添加季'}</h4>
          <Form form={seasonForm} layout="vertical" onFinish={handleSaveSeason}>
            <Form.Item name="seasonNumber" label="季编号" rules={[{ required: true, message: '请输入季编号' }]}>
              <Input type="number" />
            </Form.Item>
            <Form.Item name="title" label="季标题" rules={[{ required: true, message: '请输入季标题' }]}>
              <Input />
            </Form.Item>
            <Form.Item name="releaseDate" label="发布日期" rules={[{ required: true, message: '请选择发布日期' }]} initialValue={getTodayDate()}>
              <Input type="date" />
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary" htmlType="submit">保存</Button>
                <Button onClick={() => { seasonForm.resetFields(); setEditingSeason(null); }}>取消</Button>
              </Space>
            </Form.Item>
          </Form>
        </div>

        {/* 集管理抽屉 */}
        <Drawer
          title={`${editingSeason?.title} - 集管理`}
          width="100%"
          onClose={() => setEpisodeDrawerVisible(false)}
          open={episodeDrawerVisible}
        >
          <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
            <h3>集列表</h3>
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAddEpisode}>添加集</Button>
          </div>
          <Table
            columns={episodeColumns}
            dataSource={episodes}
            rowKey="id"
            pagination={{ pageSize: 5 }}
          />

          {/* 集添加/编辑表单 */}
          <div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid #e8e8e8' }}>
            <h4>{editingEpisode ? '编辑集' : '添加集'}</h4>
            <Form form={episodeForm} layout="vertical" onFinish={handleSaveEpisode}>
              <Form.Item name="episodeNumber" label="集编号" rules={[{ required: true, message: '请输入集编号' }]}>
                <Input type="number" />
              </Form.Item>
              <Form.Item name="title" label="集标题" rules={[{ required: true, message: '请输入集标题' }]}>
                <Input />
              </Form.Item>
              <Form.Item name="releaseDate" label="发布日期" rules={[{ required: true, message: '请选择发布日期' }]} initialValue={getTodayDate()}>
                <Input type="date" />
              </Form.Item>
              <Form.Item name="runtime" label="时长(分钟)" rules={[{ required: true, message: '请输入时长' }]}>
                <Input type="number" />
              </Form.Item>
              <Form.Item name="summary" label="简介">
                <Input.TextArea rows={4} />
              </Form.Item>
              <Form.Item name="playUrl" label="播放链接" rules={[{ required: true, message: '请输入播放链接' }]}>
                <Input />
              </Form.Item>
              <Form.Item label="上传视频文件" extra="支持mp4、avi、mov等常见视频格式">
                <Upload
                  customRequest={customRequest}
                  showUploadList={false}
                  beforeUpload={(file) => {
                    const isVideo = file.type.startsWith('video/');
                    if (!isVideo) {
                      message.error('只能上传视频文件!');
                    }
                    return isVideo;
                  }}
                >
                  <Button type="primary" icon={<UploadOutlined />} disabled={uploading}>
                    上传视频
                  </Button>
                </Upload>
                {uploading && (
                  <div style={{ marginTop: 10 }}>
                    <Progress percent={uploadProgress} status="active" />
                  </div>
                )}
              </Form.Item>
              <Form.Item>
                <Space>
                  <Button type="primary" htmlType="submit">保存</Button>
                  <Button onClick={() => { episodeForm.resetFields(); setEditingEpisode(null); }}>取消</Button>
                </Space>
              </Form.Item>
            </Form>
          </div>
        </Drawer>
      </Drawer>
      {/* CMS详情抽屉 */}
      <Drawer
        title="CMS详情"
        width="100%"
        onClose={() => setIsCmsDetailVisible(false)}
        open={isCmsDetailVisible}
      >
        <div style={{ padding: 20 }}>
          <pre>{JSON.stringify(cmsDetailData, null, 2)}</pre>
        </div>
      </Drawer>
    </div>
  );
};

export default Movies;
